<template>
    <!-- 消息中心 -->
    <div class="message-warp">
        <div class="messageContainer">
            <div class="messageLeft">
                <ul>
                    <li class="interaction" :class="{'action':id == 1}" @click="cutTabber(1)">
                        <p class="iconfont icon-yangshengqi"></p>
                        <span>提醒</span>
                    </li>
                    <li class="interaction" :class="{'action':id == 2}" @click="cutTabber(2)">
                        <p class="iconfont icon-hudong"></p>
                        <span>互动</span>
                    </li>
                    <li class="interaction" :class="{'action':id == 3}" @click="cutTabber(3)">
                        <p class="iconfont icon-dingyue"></p>
                        <span>订阅</span>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Message",
        data(){
            return {
                id:1,                    //用来判断 tabber 切换和高亮的 id    
            }
        },

        methods:{
            //切换 tabber
            cutTabber(id){
                if(id == 1){
                    //为 1 切换至提醒页面
                    this.id = id
                    this.$router.push('/message/remind')
                }else if(id == 2){
                    //为 2 切换至互动页面
                    this.id = id
                    this.$router.push('/message/interact')
                }else if(id == 3){
                    //为 3 切换至订阅页面
                    this.id = id
                    this.$router.push('/message/subscribe')
                }
            }
        },
        //挂载前给 body 添加一个类名
        mounted(){
            document.querySelector('body').className = 'messageOverall'
        },
        //卸载前将 body 中的类名删除
        beforeDestroy(){
            document.body.removeAttribute('class','messageOverall')
        }
    };
</script>

<style lang="css" scoped>
/* 消息中心样式 */
.message-warp{
    padding: 30px 0;
}
.message-warp .messageContainer{
    width: 960px;
    height:610px;
    margin: 0 auto;
}
.message-warp .messageContainer .messageLeft{
    width: 160px;
    height: 265px;
    padding-left: 30px;
    float: left;
}
.message-warp .messageContainer .messageLeft .interaction{
    width: 125px;
    height: 55px;
    box-shadow: 0px 10px 10px -15px black;
    padding: 10px 0;
    text-align: center;
    padding: 30px 0;
    color: #BBBBBB;
}
.message-warp .messageContainer .messageLeft .interaction:hover{
    color: #555555;
}
.message-warp .messageContainer .messageLeft .action {
    color: #555555;
}
.message-warp .messageContainer .messageLeft .interaction .iconfont{
    font-size: 28px;
}
.message-warp .messageContainer .messageLeft .interaction  span{
    font-size: 14px;
    font-weight: bold;
}
</style>